<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue.js"></script>

    <style>

        [v-cloak]{
            display: none;
        }

    </style>

</head>
<body>

<div id="app" v-cloak>
    <p>数据</p>
    <p>{{message}}</p>
    <p v-text="message"></p>
    <p v-html="html"></p>
    <p v-once>{{message}}</p>


    <p>{{reversMes}}</p>

    <ul>
        <li v-for="item in filterArr">{{item}}</li>
    </ul>


</div>


<script>

    let message='hello vue';

    let data=[1,2,3,4,5,6,7,8];

    setTimeout(function () {

        //声明式渲染
        let vm=  new Vue({

            el:'#app',
            data:{
                message,
                demo:'111111111111',
                html:'<div>html</div>',

                list: data,



              
            },

           computed: {
            reversMes: function (){
						// 在这里依赖的数据对象中的值发生变化，会重新计算
						console.log('执行了');
						return this.message.split('').reverse().join('');	
					},

               filterArr (){
                   return this.list.filter(item => item < 4)
               }
           }
        });

    },1000);




</script>

</body>
</html>